<template>
  <div class="article_container">
     <el-card class="article_box">
          <h2 class="title">{{article.article_title}}</h2>
          <div class="author"><i class="el-icon-user"></i>x某 <i class="el-icon-date"></i>2019-08-08</div>
          <div class="content">{{article.article_content}}</div>
          <div class="love_hate">
              <a href="javascript:;" class="love"><i class="el-icon-star-off"></i> 点个赞吧</a>
              <span class="or">or</span>
              <a href="javascript:;" class="hate"><i class="el-icon-share"></i> 分享一下</a>
          </div>
          <div class="over">
              <div class="last fl">&#60;&#60;上一个</div>
              <div class="next fr">下一个>></div>
          </div>
     </el-card>
     <el-card class="comment_box">
         <!-- <div class="comment"> -->
             <!-- <div class="my_comment"> -->
                 <span class="comment_title">写点什么吧</span>
                 <br>
                 <textarea name="" id="" cols="30" rows="10"></textarea>
                 <div class="last">
                     <div class="emoj fl">表情</div>
                     <el-button class="submitComment fr" > 提交评论</el-button>
                 </div>
             <!-- </div> -->
         <!-- </div> -->
     </el-card>
     <el-card class="commmnet_show">
         <div class="comment_box" v-for="item in commentList" :key="item.comment_id">
             <span>评论人：{{item.user_id}}</span>
             <p>{{item.comment_content}}</p>
             <p>{{item.conmment_date}}</p>
             <div class="ans_comment" v-for="item2 in item.children" :key="item2.comment_id">
                 <span>评论人：{{item.user_id}}回复</span>
                <p>{{item2.comment_content}}</p>
                <p>{{item2.conmment_date}}</p>
             </div>
         </div>
     </el-card>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 传入的文章id，获取文章数据 
            articleId: this.$route.params.id,
            article : {},
            commentList:[]
        }
    },
    created() {
        this.getArtcle()
        this.getComments()
    },
    methods: {
        // 获取文章内容
        async getArtcle(){
            const {data: res} = await this.$http.get('getArticleList',{params:{id: this.articleId}})
            // console.log(res)
            this.article = res[0]
        },
        // 获取评论
        async getComments(){
            const {data: res} = await this.$http.get('getComments',{params:{article_id: this.articleId}})
            this.commentList = res
            console.log(res)
        },
        // 评论提交
        submitComment(){},
        // 点赞数增加
        addLove(){}
        // 浏览数增加
    },
}
</script>

<style lang="less" scoped>
    .article_container {
        .article_box {
            .title {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            }
            .author {
                font-size: 14px;
                text-align: right;
                margin-right: 20px;
            }
            .content {
                width: 100%;
                text-indent: 2em;
            }
            .love_hate {
                position: relative;
                margin-top: 25px;
                text-align: center;
                font-size: 20px;
                // color: #fff;
                .love{
                    padding: 9px 30px;
                    background-color: #f17067;
                    border: 1px solid ;
                    margin-right: 10px;
                    color: #fff;
                    opacity: .9;
                }
                .or {
                    position: absolute;
                    left: 50%;
                    margin-left: -20px;
                    margin-top: -7.5px;
                    width: 40px;
                    height: 40px;
                    z-index: 3;
                    border-radius: 50%;
                    line-height: 40px;
                    // margin: 10px;
                    color: #455670;
                    background-color: #fff;
                    text-align: center;
                }
                .hate{
                    margin-left: 10px;
                    padding: 9px 30px;
                    background-color: skyblue;
                    color: #fff;
                    opacity: .9;
                    border: 1px solid ;
                }
                .love:hover,.hate:hover {
                    opacity: 1;
                    transition: all .5s;
                }
            }
            .over {
                // background-color: pink;
                margin-top: 15px;
                text-align: center;
                height: 20px;
            }

        }
        .comment_box {
            padding: 10px 0;
            margin-top: 15px;
            
                    .comment_title {
                        font-size: 20px;
                        color: #1abc9c;
                        // margin-bottom: 5px;
                        display: block;
                    }
                    textarea {
                        width: 100%;
                        font-style: none;
                        height: 100px;
                        margin-bottom: 10px;
                        resize: none;
                    }
                    textarea:focus {
                        outline: none;
                        border-color: pink;
                        transition: all .5s;
                        // box-shadow: 0 0 10px #719ECE; 
                    }
                
            
            .last {
                .emoj {
                    line-height: 45px;
                }
            }
        }
    }
    
</style>